﻿<!DOCTYPE html>
<html>
<head>
    <title>Microsoft Ajax 4.0 Grid Sample</title>

    <script type="text/javascript" src="Scripts/start.debug.js"></script>

    <script type="text/javascript">
        Sys.loadScripts(["Scripts/DaGrid.js"], function() {
            Sys.require([Sys.components.dataView], function() {

            });
        });

        var data = [{ "ProductID": 707, "Name": "Sport-100 Helmet, Red", "ProductModel": "Sport-100", "Description": "Universal fit, well-vented, lightweight , snap-on visor.", "Price": 34.99, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 708, "Name": "Sport-100 Helmet, Black", "ProductModel": "Sport-100", "Description": "Universal fit, well-vented, lightweight , snap-on visor.", "Price": 34.99, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 709, "Name": "Mountain Bike Socks, M", "ProductModel": "Mountain Bike Socks", "Description": "Combination of natural and synthetic fibers stays dry and provides just the right cushioning.", "Price": 9.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 710, "Name": "Mountain Bike Socks, L", "ProductModel": "Mountain Bike Socks", "Description": "Combination of natural and synthetic fibers stays dry and provides just the right cushioning.", "Price": 9.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 711, "Name": "Sport-100 Helmet, Blue", "ProductModel": "Sport-100", "Description": "Universal fit, well-vented, lightweight , snap-on visor.", "Price": 34.99, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 712, "Name": "AWC Logo Cap", "ProductModel": "Cycling Cap", "Description": "Traditional style with a flip-up brim; one-size fits all.", "Price": 8.99, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 713, "Name": "Long-Sleeve Logo Jersey, S", "ProductModel": "Long-Sleeve Logo Jersey", "Description": "Unisex long-sleeve AWC logo microfiber cycling jersey", "Price": 49.99, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 714, "Name": "Long-Sleeve Logo Jersey, M", "ProductModel": "Long-Sleeve Logo Jersey", "Description": "Unisex long-sleeve AWC logo microfiber cycling jersey", "Price": 49.99, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 715, "Name": "Long-Sleeve Logo Jersey, L", "ProductModel": "Long-Sleeve Logo Jersey", "Description": "Unisex long-sleeve AWC logo microfiber cycling jersey", "Price": 49.99, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 716, "Name": "Long-Sleeve Logo Jersey, XL", "ProductModel": "Long-Sleeve Logo Jersey", "Description": "Unisex long-sleeve AWC logo microfiber cycling jersey", "Price": 49.99, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 717, "Name": "HL Road Frame - Red, 62", "ProductModel": "HL Road Frame", "Description": "Our lightest and best quality aluminum frame made from the newest alloy; it is welded and heat-treated for strength. Our innovative design results in maximum comfort and performance.", "Price": 1431.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 718, "Name": "HL Road Frame - Red, 44", "ProductModel": "HL Road Frame", "Description": "Our lightest and best quality aluminum frame made from the newest alloy; it is welded and heat-treated for strength. Our innovative design results in maximum comfort and performance.", "Price": 1431.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 719, "Name": "HL Road Frame - Red, 48", "ProductModel": "HL Road Frame", "Description": "Our lightest and best quality aluminum frame made from the newest alloy; it is welded and heat-treated for strength. Our innovative design results in maximum comfort and performance.", "Price": 1431.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 720, "Name": "HL Road Frame - Red, 52", "ProductModel": "HL Road Frame", "Description": "Our lightest and best quality aluminum frame made from the newest alloy; it is welded and heat-treated for strength. Our innovative design results in maximum comfort and performance.", "Price": 1431.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 721, "Name": "HL Road Frame - Red, 56", "ProductModel": "HL Road Frame", "Description": "Our lightest and best quality aluminum frame made from the newest alloy; it is welded and heat-treated for strength. Our innovative design results in maximum comfort and performance.", "Price": 1431.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 722, "Name": "LL Road Frame - Black, 58", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 723, "Name": "LL Road Frame - Black, 60", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 724, "Name": "LL Road Frame - Black, 62", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 725, "Name": "LL Road Frame - Red, 44", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 726, "Name": "LL Road Frame - Red, 48", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 727, "Name": "LL Road Frame - Red, 52", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 728, "Name": "LL Road Frame - Red, 58", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 729, "Name": "LL Road Frame - Red, 60", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 730, "Name": "LL Road Frame - Red, 62", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 731, "Name": "ML Road Frame - Red, 44", "ProductModel": "ML Road Frame", "Description": "Made from the same aluminum alloy as our top-of-the line HL frame, the ML features a lightweight down-tube milled to the perfect diameter for optimal strength. Men\\u0027s version.", "Price": 594.83, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 732, "Name": "ML Road Frame - Red, 48", "ProductModel": "ML Road Frame", "Description": "Made from the same aluminum alloy as our top-of-the line HL frame, the ML features a lightweight down-tube milled to the perfect diameter for optimal strength. Men\\u0027s version.", "Price": 594.83, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 733, "Name": "ML Road Frame - Red, 52", "ProductModel": "ML Road Frame", "Description": "Made from the same aluminum alloy as our top-of-the line HL frame, the ML features a lightweight down-tube milled to the perfect diameter for optimal strength. Men\\u0027s version.", "Price": 594.83, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 734, "Name": "ML Road Frame - Red, 58", "ProductModel": "ML Road Frame", "Description": "Made from the same aluminum alloy as our top-of-the line HL frame, the ML features a lightweight down-tube milled to the perfect diameter for optimal strength. Men\\u0027s version.", "Price": 594.83, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 735, "Name": "ML Road Frame - Red, 60", "ProductModel": "ML Road Frame", "Description": "Made from the same aluminum alloy as our top-of-the line HL frame, the ML features a lightweight down-tube milled to the perfect diameter for optimal strength. Men\\u0027s version.", "Price": 594.83, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 736, "Name": "LL Road Frame - Black, 44", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 737, "Name": "LL Road Frame - Black, 48", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 738, "Name": "LL Road Frame - Black, 52", "ProductModel": "LL Road Frame", "Description": "The LL Frame provides a safe comfortable ride, while offering superior bump absorption in a value-priced aluminum frame.", "Price": 337.22, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 739, "Name": "HL Mountain Frame - Silver, 42", "ProductModel": "HL Mountain Frame", "Description": "Each frame is hand-crafted in our Bothell facility to the optimum diameter and wall-thickness required of a premium mountain frame. The heat-treated welded aluminum frame has a larger diameter tube that absorbs the bumps.", "Price": 1364.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 740, "Name": "HL Mountain Frame - Silver, 44", "ProductModel": "HL Mountain Frame", "Description": "Each frame is hand-crafted in our Bothell facility to the optimum diameter and wall-thickness required of a premium mountain frame. The heat-treated welded aluminum frame has a larger diameter tube that absorbs the bumps.", "Price": 1364.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 741, "Name": "HL Mountain Frame - Silver, 48", "ProductModel": "HL Mountain Frame", "Description": "Each frame is hand-crafted in our Bothell facility to the optimum diameter and wall-thickness required of a premium mountain frame. The heat-treated welded aluminum frame has a larger diameter tube that absorbs the bumps.", "Price": 1364.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 742, "Name": "HL Mountain Frame - Silver, 46", "ProductModel": "HL Mountain Frame", "Description": "Each frame is hand-crafted in our Bothell facility to the optimum diameter and wall-thickness required of a premium mountain frame. The heat-treated welded aluminum frame has a larger diameter tube that absorbs the bumps.", "Price": 1364.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 743, "Name": "HL Mountain Frame - Black, 42", "ProductModel": "HL Mountain Frame", "Description": "Each frame is hand-crafted in our Bothell facility to the optimum diameter and wall-thickness required of a premium mountain frame. The heat-treated welded aluminum frame has a larger diameter tube that absorbs the bumps.", "Price": 1349.6, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 744, "Name": "HL Mountain Frame - Black, 44", "ProductModel": "HL Mountain Frame", "Description": "Each frame is hand-crafted in our Bothell facility to the optimum diameter and wall-thickness required of a premium mountain frame. The heat-treated welded aluminum frame has a larger diameter tube that absorbs the bumps.", "Price": 1349.6, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 745, "Name": "HL Mountain Frame - Black, 48", "ProductModel": "HL Mountain Frame", "Description": "Each frame is hand-crafted in our Bothell facility to the optimum diameter and wall-thickness required of a premium mountain frame. The heat-treated welded aluminum frame has a larger diameter tube that absorbs the bumps.", "Price": 1349.6, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 746, "Name": "HL Mountain Frame - Black, 46", "ProductModel": "HL Mountain Frame", "Description": "Each frame is hand-crafted in our Bothell facility to the optimum diameter and wall-thickness required of a premium mountain frame. The heat-treated welded aluminum frame has a larger diameter tube that absorbs the bumps.", "Price": 1349.6, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 747, "Name": "HL Mountain Frame - Black, 38", "ProductModel": "HL Mountain Frame", "Description": "Each frame is hand-crafted in our Bothell facility to the optimum diameter and wall-thickness required of a premium mountain frame. The heat-treated welded aluminum frame has a larger diameter tube that absorbs the bumps.", "Price": 1349.6, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 748, "Name": "HL Mountain Frame - Silver, 38", "ProductModel": "HL Mountain Frame", "Description": "Each frame is hand-crafted in our Bothell facility to the optimum diameter and wall-thickness required of a premium mountain frame. The heat-treated welded aluminum frame has a larger diameter tube that absorbs the bumps.", "Price": 1364.5, "ModifiedDate": "\\/Date(1078938000000)\\/" }, { "ProductID": 999, "Name": "Road-750 Black, 52", "ProductModel": "Road-750", "Description": "Entry level adult bike; offers a comfortable ride cross-country or down the block. Quick-release hubs and rims.", "Price": 539.99, "ModifiedDate": "\\/Date(1078938000000)\\/"}];

    </script>

    <link type="text/css" rel="Stylesheet" href="Styles/DaGrid.css" />
</head>
<body xmlns:sys="javascript:Sys" xmlns:dv="javascript:Sys.UI.DataView">
    <div id="batik"
        class="sys-template data"
        sys:attach="dv"
        dv:data="{{ data }}"
        dv:selecteditemclass="selected"
        dv:initialselectedindex="0"
        dv:oncommand="{{ onMyCommand }}">
        <div sys:command="select" sys:commandargument="{{$index}}">
            <div id="viewTemplate">
                <a class="deleteAction" sys:command="delete" sys:commandargument="{{$index}}" style="width: 50px;display: inline-block;" href="#">Delete</a>
                <a class="editAction" sys:command="edit" sys:commandargument="{{$index}}" style="width: 50px;display: inline-block;" href="#">Edit</a>
                <span style="width: 20px; display: inline-block; border:transparent 1px solid; line-height:18px;">{{ ProductID }}</span>
                <span style="width: 175px; display: inline-block; border:transparent 1px solid; line-height:18px;">{{ Name }}</span>
                <span style="width: 175px; display: inline-block; border:transparent 1px solid; line-height:18px;">{{ ProductModel }}</span>
                <span style="width: 500px; display: inline-block; border:transparent 1px solid; line-height:18px;">{{ Description }}</span>
                <span style="width: 40px; display: inline-block; border:transparent 1px solid; line-height:18px;">{{ Price }}</span>
                <span style="width: 150px; display: inline-block; border:transparent 1px solid; line-height:18px;">{{ ModifiedDate }}</span>
            </div>
            <div id="editTemplate" class="hidden">
                <a class="saveAction" sys:command="save" sys:commandargument="{{$index}}" style="width: 50px;display: inline-block;" href="#">Save</a>
                <a class="cancelAction" sys:command="cancel" sys:commandargument="{{$index}}" style="width: 50px;display: inline-block;" href="#">Cancel</a>
                <span style="width: 20px; display: inline-block; line-height:18px;">{{ ProductID }}</span>
                <input id="editName" style="width: 175px;" sys:value="{binding Name}" />
                <input id="editProductModel" style="width: 175px;" sys:value="{binding ProductModel}" />
                <input id="editDescription" style="width: 500px;" sys:value="{binding Description}" />
                <input id="editPrice" style="width: 40px;" sys:value="{binding Price}" />
                <input id="editModifiedDate" style="width: 150px;" sys:value="{binding ModifiedDate}" />
            </div>
        </div>
   </div>
</body>
</html>
